<template>
 		<div class="container">
			<div>
				<input type="text" v-model="looks" placeholder="查询药品"  @keyup="gets($event)" list="cars" class="search">
				<datalist id="cars">
                <option v-for="item in searchlist" :value="item"></option>
            </datalist>
				
         <input type="button" class="add fr btn" @click="windowprint"  value="打印">
        <input type="button" class="add fr btn" @click="add" value="新增">
			</div>

			<div id="tablepage">
				<table>
					<tr>
						<th>序号</th>
						<th>药品名</th>
						<th>通用名</th>
						<th   style="width:60px;">拼音</th>
						<th>规格</th>
						<th  style="width:35px;">单位</th>
						<th>用法</th>
						<th>功能</th>
						<th   style="width:175px;">批准文号</th>
            <th style="width:175px;">生产厂家</th>
						<th  style="width:80px;">操作</th>
					</tr>
					<tr v-cloak v-for="(item, index) of slist">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.name_intro}}</td>
						<td>{{item.spell_intro}}</td>
						<td>{{item.specification}}</td>
						<td>{{item.unit}}</td>
						<td>{{item.employ}}</td>
						
            <td v-if="item.action">{{item.action.substring(0,10)}}</td>
            <td v-else></td>
						<td>{{item.coding}}</td>
            <td>{{item.vendor}}</td>
						<td>
							<a href="javascript:;" @click="showOverlay(index)">修改</a> |
							<a href="javascript:;" @click="del(index,item.id)">删除</a>
						</td>
					</tr>
				</table>
			</div>
      
			<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
		<!-- 下面是分页 -->
    <div class="page-bar">
    <ul>
        <li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
        <li v-if="cur==1"><a class="banclick">上一页</a></li>
        <li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">
            <a v-on:click="btnClick(index)">{{ index }}</a>
        </li>
        <li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>
        <li v-if="cur == all"><a class="banclick">下一页</a></li>
        <li><a>共<i>{{all}}</i>页</a></li>
    </ul>
</div>
    </div>
	
</template>

<script>
import _ from "lodash";
import model from "@/components/model";
import $ from "jquery";
import "jQuery.print";
export default {
  name: "drugs",
  components: {
    model
  },
  created(){
    
  },
  mounted() {
    //测试实时监听更新数据，与后台接口联系

  },
  data() {
    return {
      looks: "",
      all: 3, //总页数
      cur: 1, //当前页码
      isActive: false,
      selected: -1,
      selectedlist: {},
      slist: [],
      searchlist: [],
      list: [
        // {
        //   name: "黄芪",
        //   name_intro: "黄芪中药",
        //   spell: "huaungqi",
        //   specification: "105g",
        //   unit: "袋",
        //   employ: "1袋/次",
        //   action: "抗病毒",
        //   coding: "广120pp2160",
        //   vendor: "广州制药5厂"
        // }
      ]
    };
  },
  watch: {
    cur: function(oldValue, newValue) {
      //console.log(arguments);
    }
  },
  created() {
    this.setSlist(this.list);
  },
  mounted() {
    this.$nextTick(function() {
      this.getList(20, 1, "");
    });
  },
  methods: {
     windowprint() {
      $("#tablepage").print();
    },
    //获取数据列表
    getList(pagesize, page, name) {
      //获取也可以是查询

      // this.list.push({
      //  name: "黄芪22",
      //     name_intro: "黄芪中药2",
      //     spell: "huaungqi2",
      //     specification: "105g2",
      //     unit: "袋2",
      //     employ: "1袋/次2",
      //     action: "抗病毒2",
      //     coding: "广120pp21602",
      //     vendor: "广州制药5厂2"

      // });
      //this.setSlist(this.list);
      // let params = new URLSearchParams();

      // params.append("userid", JSON.parse(localStorage.user).userid);
      // params.append("name", name);
      // params.append("pagesize", pagesize);
      // params.append("page", page);
      // params.append("level", JSON.parse(localStorage.user).level);
      this.$http
        .post(
          "http://medical.qingguo188.com/user-drug/showlist",
          {
            userid: JSON.parse(localStorage.user).userid,
            name: name,
            pagesize: pagesize,
            page: page,
            level: JSON.parse(localStorage.user).level
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            this.all = rester.data.$message.totalpage;
            if (rester.data.$message.list.length > 0) {
              for (let i = 0; i < rester.data.$message.list.length; i++) {
                this.list.push({
                  name: rester.data.$message.list[i].name,
                  name_intro: rester.data.$message.list[i].name_intro,
                  spell_intro: rester.data.$message.list[i].spell_intro,
                  specification: rester.data.$message.list[i].specification,
                  employ: rester.data.$message.list[i].employ,
                  action: rester.data.$message.list[i].action,
                  unit: rester.data.$message.list[i].unit,
                  coding: rester.data.$message.list[i].coding,
                  vendor: rester.data.$message.list[i].vendor,
                  id: rester.data.$message.list[i].id
                });
              }
              this.setSlist(this.list);
            } else {
              this.$layer.msg("暂无结果");
            }

            //  console.log(this.list);
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );
    },
    btnClick: function(data) {
      //页码点击事件
      if (data != this.cur) {
        this.cur = data;
      }
      this.list = [];
      this.getList(20, data, this.looks);
    },
    pageClick: function() {
      console.log(this.cur + "pp");
      this.list = [];
      this.getList(20, this.cur, this.looks);
    },
    createPdf() {
      console.log("打印开始");
      //这里是打印
      // ``;
      // let newWindow = window.open("_blank");   //打开新窗口
      // let codestr = document.getElementById("pdf-wrap").innerHTML; //获取需要生成pdf页面的div代码
      // document.write(codestr); //向文档写入HTML表达式或者JavaScript代码
      // document.close(); //关闭document的输出流, 显示选定的数据
      // print(); //打印当前窗口
      // return true;
    },
    // 修改数据
    showOverlay(index) {
      this.selected = index;
      this.selectedlist = this.list[index];
      this.changeOverlay();
    },
    // 点击保存按钮
    modify(arr) {
      if (this.selected > -1) {
        //这里是修改

        console.log("修改");
        //let params = new URLSearchParams();

        // params.append("name", arr.name);
        // params.append("name_intro", arr.name_intro);
        // params.append("spell_intro", arr.spell_intro);
        // params.append("spell", "");
        // params.append("barcode", "");
        // params.append("shape", "");
        // params.append("unit", arr.unit);
        // params.append("specification", arr.specification);
        // params.append("supplier", arr.vendor);
        // params.append("employ", arr.employ);
        // params.append("action", arr.action);
        // params.append("coding", arr.coding);
        // params.append("user_id", JSON.parse(localStorage.user).userid);
        // params.append("level", JSON.parse(localStorage.user).level);
        //params.append("id", arr.id);
        //console.log(params);
        this.$http
          .post(
            "http://medical.qingguo188.com/user-drug/create",
            {
              name: arr.name,
              name_intro: arr.name_intro,
              spell_intro: arr.spell_intro,
              spell: "",
              barcode: "",
              shape: "",
              unit: arr.unit,
              specification: arr.specification,
              supplier: arr.vendor,
              employ: arr.employ,
              action: arr.action,
              coding: arr.coding,
              user_id: JSON.parse(localStorage.user).userid,
              level: JSON.parse(localStorage.user).level,
              id: arr.id
            },
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(
            rester => {
              if (rester.data.status == 1) {
                this.$layer.msg("修改成功");
                this.$set(this.list, this.selected, arr);
              } else {
                alert("失败");
              }
            },
            function() {
              this.$layer.alert("网络错误！");
            }
          );
      } else {
        //这里是新增
        // let params = new URLSearchParams();
        // params.append("name", arr.name);
        // params.append("name_intro", arr.name_intro);
        // params.append("spell_intro", arr.spell_intro);
        // params.append("spell", "");
        // params.append("barcode", "");
        // params.append("shape", "");
        // params.append("unit", arr.unit);
        // params.append("specification", arr.specification);
        // params.append("supplier", arr.vendor);
        // params.append("employ", arr.employ);
        // params.append("action", arr.action);
        // params.append("coding", arr.coding);
        // params.append("user_id", JSON.parse(localStorage.user).userid);
        // params.append("level", JSON.parse(localStorage.user).level);

        this.$http
          .post(
            "http://medical.qingguo188.com/user-drug/create",
            {
              name: arr.name,
              name_intro: arr.name_intro,
              spell_intro: arr.spell_intro,
              spell: "",
              barcode: "",
              shape: "",
              unit: arr.unit,
              specification: arr.specification,
              supplier: arr.vendor,
              employ: arr.employ,
              action: arr.action,
              coding: arr.coding,
              user_id: JSON.parse(localStorage.user).userid,
              level: JSON.parse(localStorage.user).level
            },
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded"
              }
            }
          )
          .then(
            rester => {
              if (rester.data.status == 1) {
                //arr.id = rester.data.$message.id;//新增不用穿 id
                this.list.push(arr); //这里是新增
                console.log(arr);

                this.setSlist(this.list);
                //location.reload()强制刷新页面
              } else {
                alert("失败");
              }
            },
            function() {
              this.$layer.alert("网络错误！");
            }
          );
      }
      this.setSlist(this.list);
      this.changeOverlay();
    },
    add: function() {
      this.selectedlist = {
        name: "",
        name_intro: "",
        spell_intro: "",
        specification: "",
        unit: "",
        employ: "",
        action: "",
        coding: "",
        vendor: ""
      };
      this.isActive = true;
    },
    // delete list in index location
    del(index, id) {
      // let params = new URLSearchParams();
      // params.append("userid", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);
      // params.append("drugid", id);
      this.$http
        .post(
          "http://medical.qingguo188.com/user-drug/delete",
          {
            
            drugid:id,
            userid: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            if (rester.data.status == 1) {
              this.$layer.msg("删除成功！");
              this.list.splice(index, 1);
              this.setSlist(this.list);
            } else {
              alert("失败");
            }
          },
          function() {
            this.$layer.alert("网络错误！");
          }
        );
    },
    changeOverlay() {
      this.isActive = !this.isActive;
    },
    // 获取需要渲染到页面中的数据
    setSlist(arr) {
      this.slist = JSON.parse(JSON.stringify(arr));
    },
    // 搜索
    // search(e) {
    //   var v = e.target.value,
    //     self = this;
    //   self.searchlist = [];
    //   if (v) {
    //     console.log(v);
    //     // 过滤需要的数据
    //   } else {
    //     // 没有搜索内容，则展示全部数据
    //     this.setSlist(this.list);
    //   }
    // },
    gets: _.debounce(function(ev) {
      if (ev.target.value) {
        console.log(ev.target.value);
        this.cur = 1;
        this.list = [];

        this.getList(20, 1, ev.target.value);
        this.setSlist(this.list);
      } else {
        console.log("返回后台");
        this.list = [];
        this.getList(20, 1, "");
        this.setSlist(this.list);
      }
    }, 1000)
  },
  computed: {
    indexs: function() {
      var left = 1;
      var right = this.all;
      var ar = [];
      if (this.all >= 5) {
        if (this.cur > 3 && this.cur < this.all - 2) {
          left = this.cur - 2;
          right = this.cur + 2;
        } else {
          if (this.cur <= 3) {
            left = 1;
            right = 5;
          } else {
            right = this.all;
            left = this.all - 4;
          }
        }
      }
      while (left <= right) {
        ar.push(left);
        left++;
      }
      return ar;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
[v-cloak] {
  display: ncompony;
}
input[type="button"] {
  margin: 0 10px;
}
table {
  border: 1px solid #ccc;
  padding: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 10px;
  width: 100%;
}

table td,
table th {
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

table th:first-child {
  width: 30px;
}

.container,
.st {
  width: 1200px;
  margin: 10px auto 0;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.container .add {
  padding: 5px 15px;
}
.page-bar {
  margin: 40px;
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  border: 1px solid #ddd;
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  cursor: pointer;
}
.page-bar a:hover {
  background-color: #eee;
}
.page-bar a.banclick {
  cursor: not-allowed;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}
</style>
